 <template>
     <div class="slideLeft">
         <div :style="{transform:leftLength}" class="item" @touchstart="ts($event)" @touchmove="tm($event)"
             @touchend="te($event)">
             <slot></slot>
         </div>
         <div class="menuDiv" ref="menuDiv">
             <div class="btnDel" @click="del($event)">删除</div>
         </div>
     </div>
 </template>

 <script>
     export default {
         name: "slideLeft",
         data() {
             return {
                 startX: null,
                 leftLength: "translateX(0)"
             }
         },
         methods: {
             //触摸开始
             ts(event) {
                 //先判断是不是一根手指在滑动
                 if (event.changedTouches.length == 1) {
                     //记录一下你的开始横坐标
                     this.startX = event.changedTouches[0].clientX;
                 }
             },
             //触摸滑动
             tm(event) {
                 if (event.changedTouches.length == 1) {
                     //得到手指滑动的长度
                     var length = this.startX - event.changedTouches[0].clientX //开始坐标-结束坐标
                     if (length > 0) {
                         //左滑
                         //注意length 的最大滑动距离不能超过 menuDiv的宽度
                         if (length > this.$refs.menuDiv.clientWidth) {
                             length = this.$refs.menuDiv.clientWidth;
                         }
                         this.leftLength = `translateX(${length*(-1)}px)`;
                     } else {
                         //右滑  关闭
                         this.leftLength = "translateX(0px)";
                     }
                 }
             },
             te(event) {
                 //防止你滑了一半就结束了
                 if (event.changedTouches.length == 1) {
                     var length = this.startX - event.changedTouches[0].clientX;
                     if (length < this.$refs.menuDiv.clientWidth / 2) {
                         this.leftLength = "translateX(0px)";
                     } else {
                         this.leftLength = `translateX(${this.$refs.menuDiv.clientWidth*(-1)}px)`;
                     }
                 }
             },
             del(event) {
                 this.$emit("delete",event)
             }
         }
     }
 </script>

 <style lang="scss" scoped>
     @import "../assets/css/comm.scss";

     .slideLeft {
         border-bottom: 1px solid #cccccc;
         position: relative;

         .item {
             @include flexbox();
             background-color: #ffffff;
             position: relative;
             z-index: 1;
             transition: all 0.2s linear;

             .left {
                 width: 1.2rem;
                 height: 1.2rem;
                 box-sizing: border-box;
                 padding: .1rem;

                 >img {
                     width: 100%;
                     height: 100%;
                     display: block;
                 }
             }

             .right {
                 flex: 1;
                 @include flexbox(column);
                 justify-content: space-around;
                 margin-left: .2rem;

                 .mn {
                     font-size: .28rem;
                 }

                 .time {
                     font-size: .24rem;
                     color: #999999;
                 }
             }


         }

         .menuDiv {
             position: absolute;
             right: 0px;
             top: 0px;
             height: 100%;

             .btnDel {
                 background-color: #ff0000;
                 color: #ffffff;
                 width: 1.4rem;
                 height: 100%;
                 @include flexbox();
                 justify-content: center;
                 align-items: center;
             }
         }
     }
 </style>